<template>
    <div class="stepFour">
        <step-bar step="3"/>
        <head-info :info="info" :name="$storage.get('taxDiscount').companyName"/>
        <ul class="que-list">
            <li v-for="(item,index) in selectsData" :key="item.discountConditionId">
                <p class="question"><span>{{index+1}}</span>.{{item.conditionContent}}？<van-button class="show-detail" size="mini" v-if="item.images.length != 0" @click="showImgs(item)">详情</van-button></p>
                <van-radio-group v-model="answerList[index]">
                    <van-radio :name="checkItem.conditionOptionId" v-for="checkItem in item.options" :key="checkItem.conditionOptionId">{{checkItem.optionContent}}</van-radio>
                </van-radio-group>
            </li>
        </ul>
        <p class="next-step scroll">
            <van-button size="large" @click="nextStep" :loading="loadingState">下一步</van-button>
        </p>
    </div>
</template>

<script>
import { Toast,ImagePreview } from 'vant'
export default {
    data() {
        return {
            info: '请您耐心完善企业的具体信息，系统将判断是否满足该项优惠政策的细节条件。',
            selectsData: [],
            answerList: [],
            loadingState: false
        }
    },
    created() {
        this.getSelects()
        if(this.$route.params.projectId){
            this.$storage.add('taxDiscount','projectId',this.$route.params.projectId)
        }
    },
    computed: {
        projectId() {
          return this.$route.params.projectId?this.$route.params.projectId:this.$storage.get('taxDiscount').projectId
        }
    },
    methods: {
        showImgs(item) {
           ImagePreview({
            images: item.images,
            startPosition: 0,
            })
       },
       //获取题目
        getSelects() {
            const data = {
                discountProjectId: this.projectId
            }
            this.$axios
            .post(this.API.selectsQuery,data)
            .then(res => {
                if(res.data.code == 100) {
                   this.selectsData = res.data.data
                   if(this.selectsData.length == 0) {
                       this.nextStep()
                   }
                   this.selectsData.map((item,index) => this.answerList.push(''))
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            }); 
        },
        nextStep() {
            const isAnswer = this.answerList.filter(item => item == '') 
            if(isAnswer.length != 0) {
                Toast('请完善以上条件选择')
                return
            }
            let answerData = []
            if(this.selectsData.length != 0) {
                this.selectsData.map((item,index) => {
                if(this.answerList[index] != ''){
                    answerData.push({discountConditionId:item.discountConditionId,conditionOptionId:this.answerList[index]})
                }
                })
            }
            this.loadingState = true
            const data = {
            userId: this.$storage.get('taxDiscount').userId,
            discountProjectId: this.projectId,
            answers: answerData
            }
            this.$axios
            .post(this.API.saveSelectsResult,data,{dataType:'json'})
            .then(res => {
                if(res.data.code == 100) {
                    this.loadingState = false
                    this.$router.direction = 'left'
                    this.goToParams('stepFive',{resultId: res.data.data})
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.stepFour {
    padding-top: 90px;
    background-color: #f5f5f5;
    .que-list {
        // min-height: 820px;
        margin-top: 16px;
        background-color: #fff;
        li {
            padding: 35px 60px;
            border-bottom: 2px solid #f5f5f5;
            .question {
                color: #333333;  
                font-size: 30px;
                margin-bottom: 40px;
            }
        }
    }
}
</style>

<style lang="less">
.stepFour {
    .van-radio-group {
        padding-left: 25px;
    }
}
</style>